<template>
    <div class="all">
        <div class="cont">
            <div class="photos" v-for="message in messages">
                <img :src="message.url">
                <div class="fun">
                    <p>{{message.name}}</p>
                    <p>{{message.title}}</p>
                    <p>{{message.guanzhu}}</p>
                </div>
                <div class="hellos">
                    <img src="/static/img/dynamic.png">
                    <p>加关注</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'looks',
    data() {
        return {
        messages:{}
        }
    },
      created(){
        this.$axios.get('/mydynamic').then(res=>{
            this.messages = res.data.messages;
        });
    }
}
</script>
<style lang="less" scoped>
.cont {
    padding-top: 90/75rem;
}

.photos {
    // background: url('../../img/fruit.png') no-repeat 20/75rem center;
    border: 1px dashed #666;
    border-left: none;
    height: 150/75rem;
}

.photos img {
    margin: 30/75rem 0 0 30/75rem;
    width: 90/75rem;
}

.hellos img {
    margin: 5/75rem 0 0 20/75rem;
    width: 50/75rem;
}

.photos .fun {
    margin: -100/75rem 0 0 142/75rem;
}

.fun p:nth-child(3),
.fun p:nth-child(2) {
    margin-top: 10/75rem;
    font-size: 25/75rem;
    color: #666;
}

.hellos {
    float: right;
    margin: -100/75rem 40/75rem 0 0;
    font-size: 22/75rem;
}
</style>

